<template>
	<view class="bodyClass">
		<view class="itemClass">
			<view v-show="isRole < 2" class="yonghuClass">
				<view class="yonghuItemClass">
					<span style="color: #00aa00; font-size: 18px;">立即下单</span>
					<uni-section :title="orderParams.startAddress" @click="qidianClick">
						<template v-slot:decoration>
						  <view class="decoration"></view>
						</template>
					</uni-section>	
					<uni-section :title="orderParams.endAddress"  @click="zhongdianClick">
						<template v-slot:decoration>
						  <view class="decoration2"></view>
						</template>
					</uni-section>	
					<button style="margin-top: 40px;" type="primary" @click="jiaoche">立即叫车</button>
				</view>
				<uni-drawer ref="showButtom" mode="buttom">
					
				</uni-drawer>
				<view>
					<!-- 普通弹窗 -->
					<uni-popup ref="popup" background-color="#fff">
						<view class="popupView">
							<uni-forms :modelValue="orderParams" label-width="100px">
								<uni-forms-item label="重量(公斤):" name="zhongliang">
									<uni-easyinput type="digit" v-model="orderParams.zhongliang" placeholder="请输入重量,首重5公斤,超1公斤2元" @input="zhongliangInput"/>
								</uni-forms-item>
								<uni-forms-item label="体积(m³):" name="tiji">
									<uni-easyinput type="digit" v-model="orderParams.tiji" placeholder="请输入体积" />
								</uni-forms-item>
								<uni-forms-item name="pinlei" label="品类:">
									<uni-easyinput type="text" v-model="orderParams.pinlei" placeholder="请输入品类" />
								</uni-forms-item>
								<uni-forms-item name="isTeshu" label="特殊运输:">
									<uni-data-checkbox v-model="orderParams.isTeshu" :localdata="teshuS" />
								</uni-forms-item>
								<uni-forms-item name="amount" label="费用(元):">
									<uni-easyinput v-model="orderParams.amount" disabled />
								</uni-forms-item>
							</uni-forms>
							<button @click="submitForm" type="primary">立即下单</button>
						</view>
					</uni-popup>
				</view>
				<view>
					<!-- 提示窗示例 -->
					<uni-popup ref="songdaDialog" type="dialog">
						<uni-popup-dialog type="success" cancelText="关闭" confirmText="确认" title="订单送达" content="您的订单已送达" @confirm="songdaConfirm"
							@close="songdaConfirm">
						</uni-popup-dialog>
					</uni-popup>
				</view>
				<view>
					<!-- 提示窗示例 -->
					<uni-popup ref="dingdanDialog" type="dialog">
						<uni-popup-dialog type="success" cancelText="关闭" confirmText="确认" title="已接单" content="您的订单已有师傅接单" @confirm="dingdanConfirm"
							@close="dingdanConfirm">
						</uni-popup-dialog>
					</uni-popup>
				</view>
			</view>
			<view v-show="isRole === 2" class="yonghuClass">
				<view class="sijiItemClass">
					<view class="tingzhiClass" @click="kaishijiedan" v-if="jiedanFlag"><span class="jiedanText">开始接单</span></view>
					<view class="tingzhiClass" v-if="!jiedanFlag" @click="tingzhijiedan"><span class="tingzhiText">停止接单</span></view>
				</view>
				<view>
					<!-- 提示窗示例 -->
					<uni-popup ref="jiedanDialog" type="dialog">
						<uni-popup-dialog type="success" cancelText="关闭" confirmText="接单" title="新订单" @confirm="dialogConfirm"
							@close="dialogClose">
							<view>
								<view>订单号：{{dingdanInfo.orderNo}}</view>
								<view>起点地址：{{dingdanInfo.startAddress}}</view>
								<view>终点地址：{{dingdanInfo.endAddress}}</view>
								<view>费用：{{dingdanInfo.amount}} 元</view>
							</view>
						</uni-popup-dialog>
					</uni-popup>
				</view>
				<view>
					<!-- 提示窗示例 -->
					<uni-popup ref="quxiaoDialog" type="dialog">
						<uni-popup-dialog type="error" cancelText="关闭" confirmText="确认" title="用户取消订单" @confirm="quxiaoConfirm"
							@close="quxiaoConfirm">
							<view>
								<view>订单号：{{dingdanInfo.orderNo}}</view>
								<view>起点地址：{{dingdanInfo.startAddress}}</view>
								<view>终点地址：{{dingdanInfo.endAddress}}</view>
								<view>费用：{{dingdanInfo.amount}} 元</view>
							</view>
						</uni-popup-dialog>
					</uni-popup>
				</view>
				<view>
					<!-- 提示窗示例 -->
					<uni-popup ref="paisongDialog" type="dialog">
						<uni-popup-dialog type="success" confirmText="查看订单" title="进行中" content="您的有派送中的订单" @confirm="paisongConfirm">
						</uni-popup-dialog>
					</uni-popup>
				</view>
			</view>
			<view v-show="isRole === 3">
				<view>
					<uni-grid :column="3" :show-border="false" :square="false">
						<uni-grid-item>
							<uni-card title="注册人数" :isFull="true" @click="userList(0)">
								<text>{{countInfo.userCount + countInfo.sijiCount}}</text>
							</uni-card>
						</uni-grid-item>
						<uni-grid-item>
							<uni-card title="注册司机" :isFull="true" @click="userList(2)">
								<text>{{countInfo.sijiCount}}</text>
							</uni-card>
						</uni-grid-item>
						<uni-grid-item>
							<uni-card title="注册用户" :isFull="true" @click="userList(1)">
								<text>{{countInfo.userCount}}</text>
							</uni-card>
						</uni-grid-item>
						<uni-grid-item>
							<uni-card title="全部订单" :isFull="true" @click="dingdan(0)">
								<text>{{countInfo.total}}</text>
							</uni-card>
						</uni-grid-item>
						<uni-grid-item>
							<uni-card title="待分配订单" :isFull="true" @click="dingdan(1)">
								<text>{{countInfo.daiCount}}</text>
							</uni-card>
						</uni-grid-item>
						<uni-grid-item>
							<uni-card title="进行中订单" :isFull="true" @click="dingdan(2)">
								<text>{{countInfo.jieCount}}</text>
							</uni-card>
						</uni-grid-item>
						<uni-grid-item>
							<uni-card title="已完成订单" :isFull="true" @click="dingdan(3)">
								<text>{{countInfo.songCount}}</text>
							</uni-card>
						</uni-grid-item>
						<uni-grid-item>
							<uni-card title="已取消订单" :isFull="true" @click="dingdan(4)">
								<text>{{countInfo.quCount}}</text>
							</uni-card>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: 0,
				isRole: 0,
				jiedanFlag: true,
				token: '',
				latitude: '',
				longitude: '',
				orderParams: {
					startLatLon: '',
					startAddress: '请选择起点',
					endLatLon: '',
					endAddress: '请选择终点',
				},
				teshuS: [
					{
						text: '否',
						value: 0
					}, {
						text: '是',
						value: 1
					}
				],
				query: {},
				socketTask: {},
				httpUrl: 'http://192.168.31.178:8084/api',
				wsUrl: 'ws://192.168.31.178:8084',
				dingdanInfo: {},
				orderInfo: {},
				countInfo:{}
			}
		},
		onLoad() {
			this.getLatLon()
		},
		onShow() {
			var isRole = uni.getStorageSync('isRole');
			var token = uni.getStorageSync('token');
			var username = uni.getStorageSync('username')
			this.userId = uni.getStorageSync('id')
			if(token){
				this.token = token
				this.connect()
			} else {
				uni.showToast({title:'请先登录',icon:'error',duration: 2000})
				uni.navigateTo({
				    url: '/pages/login/login'
				});
			}
			console.log(isRole)
			if(isRole){
				this.isRole = isRole;
				if(isRole === 2){
					this.getOrderInfo()
				} else if(isRole === 3){
					this.getCountInfo()
				}
			}
			this.getUserInfo()
		},
		methods: {
			qidianClick(){
				var that = this
				uni.chooseLocation({
					success: function (res) {
						that.orderParams.startAddress = res.address;
						that.orderParams.startLatLon = res.latitude + ',' + res.longitude
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
					}
				});
			},
			jiaoche(){
				if(this.orderParams.startLatLon && this.orderParams.endLatLon){
					this.$refs.popup.open('bottom')
				} else {
					uni.showToast({title:'请先选择起点或终点位置！！！',icon:'error',duration: 2000})
				}
			},
			getUserInfo(){
				var that = this
				uni.request({
					url: this.httpUrl + '/user/info',
					method: 'GET',
					header: {
						'like-token':this.token
					},
					success(res) {
						console.log(res);
						if (res.data.code !== 200) {
							uni.showToast({title:res.data.msg,icon:'error',duration: 2000})
							return
						} else if (res.data.code === 333) {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						} else {
							if(res.data.data.isJiedan === 0){
								that.jiedanFlag = true
							} else {
								that.jiedanFlag = false
							}
							
						}
					},
					fail(err) {
						uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
					}
				})
			},
			zhongdianClick(){
				var that = this
				uni.chooseLocation({
					success: function (res) {
						that.orderParams.endAddress = res.address;
						that.orderParams.endLatLon = res.latitude + ',' + res.longitude
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
					}
				});
			},
			zhongliangInput(e){
				var money = 12
				if(e > 5){
					money = Math.round((e - 5) * 2 * 100) /100 + money
				}
				this.orderParams.amount = money
			},
			submitForm(){
				let that = this;
				uni.request({
					url: this.httpUrl + '/order/createOrder',
					method: 'POST',
					data: this.orderParams,
					header: {
						'like-token':this.token
					},
					success(res) {
						console.log(res);
						if (res.data.code === 333) {
							uni.navigateTo({
								url: '/pages/login/login'
							});	
						} else if (res.data.code !== 200) {
							uni.showToast({title:res.data.msg,icon:'error',duration: 2000})
							return
						} else{
							uni.showToast({title:'下单成功',duration: 2000})
							that.$refs.popup.close()
						}
					},
					fail(err) {
						uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
					}
				})
			},
			getLatLon(){
				var that = this
				setInterval(() => {
					uni.getLocation({
						type: 'gcj02',
						success: function (res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							console.log('onLocationChange:',res.latitude + ',' + res.longitude)
							var latLon = res.latitude + ',' + res.longitude
							var params = {
								field : 'latlon',
								value : latLon
							}
							uni.request({
								url: that.httpUrl + '/user/edit',
								method: 'POST',
								data: params,
								header: {
									'like-token':that.token
								},
								success(res) {
									console.log(res);
								},
								fail(err) {
									uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
								}
							})
						},
						fail(er) {
							console.log('获取位置失败',er)
						}
					});
				},60000);
			},
			connect() {
				let that = this;
				that.socketTask = uni.connectSocket({
					url: this.wsUrl + '/myWs?userId=' + that.userId,
					success(res) {
						// 这里是接口调用成功的回调，不是连接成功的回调，请注意
						console.log('myWs')
					},
					fail(err) {
						console.log('err')
						// 这里是接口调用失败的回调，不是连接失败的回调，请注意
					}
				})
				that.socketTask.onOpen((res)=> {
					if (res) {
						//说明已经连接成功了
						console.log('链接成功')
					}
				});
				that.socketTask.onMessage((res)=>{
					//接收消息
					 console.log('message',res);
					 var jsonData = JSON.parse(res.data)
					 console.log('jsonData:',jsonData);
					 var jsonRes = JSON.parse(jsonData.msg)
					  console.log('jsonRes:',jsonRes);
					  that.dingdanInfo = jsonRes
					  console.log('status:',jsonRes.status)
					 if(jsonRes.status === 1){
						 that.$refs.jiedanDialog.open() 
					 } else if(jsonRes.status === 2){
						that.$refs.dingdanDialog.open()  
					 } else if(jsonRes.status === 3){
						 that.$refs.songdaDialog.open() 
					 } else if(jsonRes.status === 4){
					 	 that.$refs.quxiaoDialog.open() 
					 }		
				 })
			},
			kaishijiedan(){
				var that = this
				var params = {
					field : 'isJiedan',
					value : 1
				}
				uni.request({
					url: this.httpUrl + '/user/edit',
					method: 'POST',
					data: params,
					header: {
						'like-token':this.token
					},
					success(res) {
						that.jiedanFlag = false
						console.log(res);
					},
					fail(err) {
						uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
					}
				})
			},
			tingzhijiedan(){
				var that = this
				var params = {
					field : 'isJiedan',
					value : 0
				}
				uni.request({
					url: this.httpUrl + '/user/edit',
					method: 'POST',
					data: params,
					header: {
						'like-token':this.token
					},
					success(res) {
						that.jiedanFlag = true
						console.log(res);
					},
					fail(err) {
						uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
					}
				})
			},
			dialogConfirm(){
				var that = this
				uni.request({
					url: this.httpUrl + '/order/jiedan?id=' + that.dingdanInfo.id,
					method: 'GET',
					header: {
						'like-token':this.token
					},
					success(res) {
						uni.showToast({title:'接单成功',duration: 2000})
						that.dialogClose()
						that.tingzhijiedan()
						that.getOrderInfo()
					},
					fail(err) {
						uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
					}
				})
			},
			dialogClose(){
				this.$refs.jiedanDialog.close()
			},
			quxiaoConfirm(){
				this.$refs.quxiaoDialog.close()
			},
			songdaConfirm(){
				this.$refs.songdaDialog.close()
			},
			dingdanConfirm(){
				this.$refs.dingdanDialog.close()
			},
			paisongConfirm(){
				uni.navigateTo({
				    url: '/pages/orderlist/orderIDetail/orderIDetail?item=' + JSON.stringify(this.orderInfo)
				});
			},
			//查询司机是否有正在进行中的订单
			getOrderInfo(){
				var that = this
				uni.request({
					url: this.httpUrl + '/order/getOrderInfo',
					method: 'GET',
					header: {
						'like-token':this.token
					},
					success(res) {
						console.log('12121:',res)
						if(res.data.data){
							that.orderInfo = res.data.data
							that.$refs.paisongDialog.open()
						}
					},
					fail(err) {
						uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
					}
				})
			},
			//统计
			getCountInfo(){
				var that = this
				uni.request({
					url: this.httpUrl + '/order/countInfo',
					method: 'GET',
					header: {
						'like-token':this.token
					},
					success(res) {
						that.countInfo = res.data.data
					},
					fail(err) {
						uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
					}
				})
			},
			dingdan(status){
				uni.navigateTo({
					url: '/pages/orderlist/orderlist?status=' + status
				});
			},
			userList(isRole){
				uni.navigateTo({
					url: '/pages/userList/userList?isRole=' + isRole
				});
			}
		}
	}
</script>

<style>
.bodyClass{
	width: 100%;
	height: 1500rpx;
	display: flex;
	justify-content: center;
	background-size: cover;
	background-image: url('/static/5df129f0-bad8-4bfc-b090-26ebad9454fe.jpg');
}	
.itemClass{
	padding: 30px;
	width: 80%;
}
.yonghuClass{
	padding-top: 200rpx;
	display: flow;
	flex-direction: column;
	justify-items: center;
	align-items: center;
	width: 100%;
}
.yonghuItemClass{
	width: 90%;
	padding: 20rpx;
	border-radius: 5rpx;
	background-color: #f9d39f;
}
.sijiItemClass{
	width: 90%;
	padding: 20rpx;
}
.decoration{
    width: 6rpx;
    height: 6rpx;
	margin-right: 4rpx;
    border-radius: 50%;
	background-color: #18bc37;
  }
.decoration2{
    width: 6rpx;
    height: 6rpx;
	margin-right: 4rpx;
    border-radius: 50%;
	background-color: #ffaa00;
  }  
 .popupView{
	 padding: 20px;
	 margin-bottom: 60px;
 } 
.jiedanText{
	font-size: 30px;
	font-family: fangsong;
}
.tingzhiText{
	font-size: 30px;
	font-family: fangsong;
	color: red;
}
.tingzhiClass{
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	width: 300rpx;
	height: 300rpx;
	margin-left: 15%;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
	padding: 20px; /* 可选，增加内边距以便更好地看到阴影效果 */
	margin: 50px; /* 可选，增加外边距以便更好地看到效果 */
	background-color: #55aaff; /* 初始颜色 */
	border-radius: 50%; /* 圆形 */
	animation: breatheColor 2s infinite; /* 应用动画 */
}
@keyframes breatheColor {
  0%, 100% {
	opacity: 1; /* 初始和结束时完全不透明 */
  }
  50% {
	opacity: 0.7; /* 中间变为半透明 */
  }
  0%{
	transform: scale(0.88);
  }
  50%{
	  transform: scale(1);
  }
   100%{
	  transform: scale(0.88);
  }
}
</style>
